import * as React from 'react'
import { Avatar, Button, Spin, Tooltip } from 'antd'
import { FullscreenOutlined, FullscreenExitOutlined, StarOutlined, StarFilled } from '@ant-design/icons'
import { connect, ContentStore, dispatch, getState } from '../store'
import styles from '../content.less'
import { api_gitee } from '../../../apis'
import { beginSSE } from '../../../util/Fetch'
import logger from '../../../util/logger'

interface ShowInfoState extends ContentStore {
    doStar: () => Promise<void>
}
export const _ShowInfo: React.FC<ShowInfoState> = (props) => {
    const { mode = "default", loginUser, doStar, loading } = props

    React.useEffect(() => {
        beginSSE('http://127.0.0.1:2850/listen', {
            onopen: function () {
                logger.log('与服务器建立连接')
            },
            onclose: function () {
                logger.log('与服务器断开连接')
            },
            onmessage: function (msg) {
                logger.log('与服务器通信成功', msg.data)
            },
            onerror: function () {
                logger.log('与服务器通信发生错误')
            }
        })
    }, [])

    if (mode === 'min') {
        return <div className={styles.min_container}>
            <Tooltip title="点击展示详情" placement="leftTop">
                <Button size="large" onClick={() => dispatch(state => ({
                    ...state, mode: 'default'
                }))}>
                    <FullscreenOutlined />
                </Button>
            </Tooltip>
        </div>
    }

    if (!loginUser) {
        return <div className={styles.max_container}>
            <FullscreenExitOutlined className={styles.btn_close} onClick={() => dispatch(state => ({
                ...state, mode: 'min'
            }))} />
            <Button type="primary" onClick={() => open("https://gitee.com/login")}>登录gitee</Button>
        </div>
    }

    return <Spin spinning={loading}>
        <div className={styles.max_container}>
            <FullscreenExitOutlined className={styles.btn_close} onClick={() => dispatch(state => ({
                ...state, mode: 'min'
            }))} />
            <Avatar src="https://joeschmoe.io/api/v1/random" size="large" />
            <div><Button size="large" type="link" target='_blank' href={`https://gitee.com/${loginUser.id}`}>{loginUser.name}</Button></div>
            <br />
            <div>
                <Button.Group>
                    <Tooltip title="点击跳转git地址">
                        <Button
                            type="primary" target='_blank'
                            icon={<img src="https://gitee.com/favicon.ico" />}
                            href="https://gitee.com/f2e-server/f2e-crx-creator">f2e-crx-creator</Button>
                    </Tooltip>
                    <Tooltip title={loginUser.stared ? '已Star, 无需点击' : '点击Star'}>
                        <Button type="default">
                            {loginUser.stared ? <StarFilled /> : <StarOutlined onClick={doStar} />}
                        </Button>
                    </Tooltip>
                </Button.Group>
            </div>
        </div>
    </Spin>
}

const doStar = async () => {
    // console.log('doStar form content')
    dispatch(state => ({ ...state, loading: true }))
    await api_gitee.star()
    const res = await api_gitee.user_info()
    dispatch(state => ({ ...state, loginUser: res.data, loading: false }))
}
export const ShowInfo = connect(() => ({
    ...getState(),
    doStar,
}))(_ShowInfo)
export default ShowInfo